<template>
  <div class="department-management-container">
    <!-- 页面标题 -->
    <mains :title="'新增科室信息'"></mains>
      <!-- 科室表单 -->
    <Card class="form-card">
      <Form :model="form" :rules="rules" ref="formRef" label-width="120">
        <FormItem label="科室名称" prop="departmentName">
          <Input v-model="form.departmentName" placeholder="请输入科室名称" />
        </FormItem>
        <FormItem label="所属院区" prop="hospitalArea">
          <Select v-model="form.hospitalArea" placeholder="请选择院区">
            <Option v-for="area in areaOptions" :value="area.value" :key="area.value">{{ area.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="上级科室" prop="parentDepartment">
          <Select v-model="form.parentDepartment" placeholder="请选择上级科室">
            <Option v-for="dept in departmentOptions" :value="dept.value" :key="dept.value">{{ dept.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="科室位置" prop="departmentLocation">
          <Input v-model="form.departmentLocation" placeholder="请输入内容" />
        </FormItem>
        <FormItem label="科室状态" prop="departmentStatus">
          <Switch v-model="form.departmentStatus" />
          <span class="ml-10">启用/禁用</span>
        </FormItem>
      </Form>
       <!-- 表单底部的操作按钮 -->
      <div class="form-actions">
        <Button @click="handleCancel">取消</Button>
        <Button type="primary" @click="handleSave">保存</Button>
      </div>
    </Card>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted } from 'vue';
 import mains from '@/components/main.vue'

// 科室数据类型定义
interface Department {
  id: number;
  departmentName: string;
  hospitalArea: string;
  parentDepartment: string;
  departmentLocation: string;
  departmentStatus: boolean;
}

// 表单数据
const form = reactive({
  departmentName: '',
  hospitalArea: '',
  parentDepartment: '',
  departmentLocation: '',
  departmentStatus: true
});

// 表单引用
const formRef = ref(null);

// 院区选项
const areaOptions = ref([
  { value: 'east', label: '东院区' },
  { value: 'west', label: '西院区' },
  { value: 'south', label: '南院区' },
  { value: 'north', label: '北院区' },
  { value: 'central', label: '中心院区' }
]);

// 科室选项（用于上级科室选择）
const departmentOptions = ref([
  { value: '', label: '无上级科室' },
  { value: '1', label: '内科' },
  { value: '2', label: '外科' },
  { value: '3', label: '妇产科' },
  { value: '4', label: '儿科' },
  { value: '5', label: '急诊科' }
]);

// 表单验证规则
const rules = reactive({
  departmentName: [
    { required: true, message: '请输入科室名称', trigger: 'blur' },
    { min: 2, max: 50, message: '科室名称长度在 2 到 50 个字符之间', trigger: 'blur' }
  ],
  hospitalArea: [
    { required: true, message: '请选择所属院区', trigger: 'change' }
  ],
  contactPhone: [
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ]
});

// 保存科室信息
const handleSave = () => {
  (formRef.value as any).validate((valid: boolean) => {
    if (!valid) return;
    
    // 准备提交数据
    const departmentData: Department = {
      id: Date.now(), // 临时ID，实际应由后端生成
      departmentName: form.departmentName,
      hospitalArea: form.hospitalArea,
      parentDepartment: form.parentDepartment,
      departmentLocation: form.departmentLocation,
      contactPhone: form.contactPhone,
      departmentHead: form.departmentHead,
      departmentDescription: form.departmentDescription,
      departmentStatus: form.departmentStatus
    };
    
    // 模拟API请求
    saveDepartmentData(departmentData).then(() => {
      Message.success('科室信息保存成功');
      // 这里可以导航到科室列表页面
      console.log('保存成功，跳转到列表页...');
    }).catch(error => {
      Message.error('保存失败，请重试');
      console.error(error);
    });
  });
};

// 模拟保存科室数据到后端
const saveDepartmentData = async (data: Department) => {
  return new Promise((resolve, reject) => {
    // 模拟API请求延迟
    setTimeout(() => {
      // 在实际应用中，这里应该是调用后端API
      console.log('提交科室数据:', data);
      resolve(true);
    }, 800);
  });
};

// 取消操作
const handleCancel = () => {
  // 这里可以添加确认对话框，询问用户是否真的要取消
  console.log('取消操作，返回上一页...');
  // 实际应用中应该使用路由返回上一页
};




// 页面加载时的初始化操作
onMounted(() => {
  // 可以在这里添加页面初始化逻辑，如获取院区数据等
});
</script>

<style scoped>
.add-department-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 20px;
}

.title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-top: 5px;
}

.form-card {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #e8e8e8;
}
</style>  